import { FC, useMemo } from 'react';
import { proxy, ref, subscribe, useSnapshot } from 'valtio';
import '@ant-design/v5-patch-for-react-19';
import { message } from 'antd';

import { DataCard } from '../components/DataCard';
import { Demo } from '../components/Demo';
import './globals.scss';

export default {
  title: '自定义组件',
  component: DataCard,
};

export const DemoStory: FC = () => {
  return (
    <div style={{ width: '300px' }}>
      <Demo />
    </div>
  );
};

interface DataCardProps {
  totalSales: number;
  weekBasis: number;
  dayBasis: number;
  daySales: number;
}

export const DataCardStory: FC = () => {
  // 组件默认值
  const state = useMemo(() => {
    return proxy({
      'totalSales': 123456,
      'weekBasis': 0.13,
      'dayBasis': -0.11,
      'daySales': 12423,
    });
  }, []);
  const snap: DataCardProps = useSnapshot(state);

  return (
    <div style={{ width: '300px' }}>
      <DataCard
        {...snap}
        state={state}
        triggerEvent={(eventId: string) => {
          message.open({
            type: 'info',
            content: `触发动作: ${eventId}`,
          });
          // state.totalSales += 100;
          // console.log('触发动作', eventId);
        }}
      />
    </div>
  );
};

// DataCardStory.storyName = '数据卡片';
